/**
 * @summary: 反馈编辑页，页面级别
 * @author: lixinxiang@vv.cn
 */

import React, { useCallback, useEffect, useState } from 'react';
import { Form, Input, Button, Card, message } from 'antd';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import { fetchOneFeedback, updateFeedback } from '@/services/feedback';
import pageTabUtil from '@/utils/pageTabUtil';

const layout = {
    labelCol: { span: 4 },
    wrapperCol: { span: 20 }
};

const FeedbackForm = ({ form, location }) => {
    const { id } = location.query;
    const { getFieldDecorator } = form;
    const [submitting, setSubmitting] = useState(false);

    useEffect(() => {
        const fetchData = async () => {
            const { data = {} } = (await fetchOneFeedback(id)) || {};
            const { bugDesc, jirano, frontUrl, frontTitle } = data;
            form.setFieldsValue({ bugDesc, jirano, frontUrl, frontTitle });
        };
        fetchData();
    }, []);

    const handleSubmit = useCallback(async e => {
        e.preventDefault();
        form.validateFields(async (err, values) => {
            if (err) {
                return;
            }
            try {
                await updateFeedback({ id, ...values });
                pageTabUtil.goBack();
            } catch (error) {
                message.error(error);
            } finally {
                setSubmitting(false);
            }
        });
    }, []);

    return (
        <PageHeaderWrapper>
            <Card>
                <Form layout="horizontal" onSubmit={handleSubmit} {...layout}>
                    <Form.Item label="jira编号">
                        {getFieldDecorator('jirano', {
                            rules: [
                                {
                                    required: true,
                                    message: '请输入内容',
                                    type: 'string'
                                }
                            ]
                        })(<Input style={{ width: 400 }} />)}
                    </Form.Item>
                    <Form.Item label="标题">
                        {getFieldDecorator('frontTitle', {
                            rules: [
                                {
                                    required: true,
                                    message: '请输入内容',
                                    type: 'string'
                                }
                            ]
                        })(<Input style={{ width: 400 }} />)}
                    </Form.Item>
                    <Form.Item label="路径">
                        {getFieldDecorator('frontUrl', {
                            rules: [
                                {
                                    required: true,
                                    message: '请输入内容',
                                    type: 'string'
                                }
                            ]
                        })(<Input style={{ width: 400 }} />)}
                    </Form.Item>
                    <Form.Item label="描述">
                        {getFieldDecorator('bugDesc', {
                            rules: [
                                {
                                    required: true,
                                    message: '请输入内容',
                                    type: 'string'
                                }
                            ]
                        })(<Input.TextArea rows={4} style={{ width: 400 }} />)}
                    </Form.Item>
                    <Form.Item wrapperCol={{ span: 12, offset: 4 }}>
                        <Button type="primary" htmlType="submit" loading={submitting}>
                            保存
                        </Button>
                    </Form.Item>
                </Form>
            </Card>
        </PageHeaderWrapper>
    );
};

export default Form.create({ name: 'FeedbackForm' })(FeedbackForm);
